<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition name="donghua" appear>
      <h2 v-show="isShow">ICH LIEBE DICH</h2>
    </transition>
  </div>
</template>

<script>
export default {
  name: "com01",
  data() {
    return {
      isShow: true,
    };
  },
  methods: {},
};
</script>

<style scpped>
* {
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 30px;
  text-align: center;
  background-image: -webkit-linear-gradient(
    left,
    #e9a5a5,
    #b8c1c0 10%,
    #65c0e0 20%,
    #aea2db 30%,
    #81c1d9 40%,
    #e9a5a5 50%,
    #b8c1c0 60%,
    #65c0e0 70%,
    #aea2db 80%,
    #81c1d9 90%,
    #e9a5a5
  );
  color: transparent;
  -webkit-background-clip: text;
  background-size: 50% 100%;
  animation: a 5s infinite linear;
}

@keyframes a {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@keyframes b {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
.donghua-enter-active {
  animation: b 0.5s linear;
}
.donghua-leave-active {
  animation: b 0.5s linear reverse;
}
</style>